import React from 'react';
import { Carousel } from 'antd';
import CardList from '../../common/cardList/index.jsx';
import './index.less';

class Home extends React.Component {
  constructor(props){
    super(props);
    this.state={
      keyword: (this.props.location.state || {} ).keyword || '春季',
    }
  }
  componentDidUpdate (prevProps,prevState){
    //比较上一次和这次都路径名是否不同
    let oldPath = prevProps.location.pathname,
        newPath = this.props.location.pathname,
        newkeyword = (this.props.location.state || {} ).keyword || '春季';
    //如果不同，就更新keyword
       if(oldPath !== newPath){
          this.setState({
            keyword : newkeyword
          })
       } 
  }
  render() {
    return (
      <div className="home-wrap">
        <Carousel effect="fade" className="home-swiper" autoplay>
          <div>
            <img
              src="https://i3.meishichina.com/attachment/mofang/2019/02/28/20190228155134869390510169539.jpg"
              alt="春节养生"
            />
          </div>
          <div>
            <img
              src="https://i3.meishichina.com/attachment/mofang/2019/03/01/20190301155142852315710138013.jpg"
              alt="美容排毒"
            />
          </div>
          <div>
            <img
              src="https://i3.meishichina.com/attachment/mofang/2019/02/21/2019022115507147387858197577.jpg"
              alt="快手晚餐"
            />
          </div>
          <div>
            <img
              src="https://i3.meishichina.com/attachment/mofang/2019/01/08/2019010815469160847868197577.jpg"
              alt="无辣不欢"
            />
          </div>
        </Carousel>
        <CardList keyword={this.state.keyword}/>
      </div>
    );
  }
}
export default Home;
